<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>03.清除浮动</title>
        <style>
            /**
             * 清除浮动的方式，如下：
             * 1.给父级设置一个高度，比较死板，不灵活。比如我们
             * 随便写一个新闻页面高度都是不固定的，所以这种清除
             * 浮动的方式完全不靠谱
             * 2.给父级加浮动，会导致margin: 0 auto;居中失效
             * 3.给父级加display: inline-block;，同样也会
             * 导致margin: 0 auto;居中失效
             * 4.在最后一个浮动元素下方加入一个空div标签，
             * <div style="font-size: 0; height: 0; clear: both;"></div>
             * 这种方式不利于SEO搜索引擎优化，只有jd.com
             * 那撒比网站还用这种清浮动方式，刘强东就一傻逼，不解释！
             * 5.在最后一个浮动元素下方加入br标签，如下：
             * <br clear="all" />
             * 6.在父级创建BFC闭合空间来清除浮动，在父级加入以下样式，如下：
             * overflow: hidden; zoom: 1;
             * 7.用伪类after来清除浮动，是当前市面上最常用的清除浮动的方法，如下：
             * .clearfix:after {
             *     display: block;
             *     clear: both;
             *     visibility: hidden;
             *     overflow: hidden;
             *     font-size: 0;
             *     height: 0;
             *     line-height: 0;
             *     content: '';
             * }
             * .clearfix {
             *    // 触发IE下的hasLayout，兼容IE6下也可以清除浮动
             *    *zoom: 1;
             * }
             * 当前像sina.com.cn用的就是这种伪类after的清除浮动方式
             * 8.其实还有一种更推荐的清浮动方式，也是用前后伪类创建BFC闭合空间来
             * 清除浮动，如下：
             * .clearfix:before,
             * .clearfix:after {
             *     display: table;
             *     content: '';
             * }
             * .clearfix:after {
             *     clear: both;
             * }
             * .clearfix {
             *     // 触发IE下的hasLayout，兼容IE6下也可以清除浮动
             *     *zoom: 1;
             * }
             * 当前像taobao.com、xiaomi.com用的就是这种伪类after的清除浮动方式
             */
            * {
                margin: 0;
                padding: 0;
                border: 0;
                list-style: none;
            }
            /* .clearfix:after {
                display: block;
                clear: both;
                visibility: hidden;
                overflow: hidden;
                font-size: 0;
                height: 0;
                line-height: 0;
                content: '';
            }
            .clearfix {
                *zoom: 1;
            } */
            .clearfix:before,
            .clearfix:after {
                display: table;
                content: '';
            }
            .clearfix:after {
                clear: both;
            }
            .clearfix {
                *zoom: 1;
            }
            .wrap {
                width: 100%;
                border: 1px solid #f00;
                /** 创建BFC安全区域来清除浮动 */
                /* overflow: hidden;
                zoom: 1; */
            }
            .wrap .kaykay {
                width: 250px;
                height: 250px;
                background-color: pink;
                float: left;
            }
            .wrap .yuyu {
                width: 150px;
                height: 150px;
                background-color: blue;
                float: left;
            }
            .xiaoyou {
                width: 500px;
                height: 500px;
                background-color: purple;
            }
        </style>
    </head>
    <body>
        <!--
            1.浮动的目的：让块级元素排到同一行去，实现我们要的布局效果。
            2.元素浮动之后会脱离文档流，不占居位置，那么就要清除浮动。
            3.清除浮动元素的目的：为了解决浮动对其它盒子带来的影响。其实就是
            为了解决父级盒子高度为0的问题。
            4.BFC -> Block Formatting Context，通常我们会创建BFC安全区域
         -->
        <div class="wrap clearfix">
            <div class="kaykay"></div>
            <div class="yuyu"></div>
            <!-- <br clear="all" /> -->
            <!-- <div style="font-size: 0; height: 0; clear: both;"></div> -->
        </div>
        <div class="xiaoyou">我就是小小游，英文名是allen!</div>
    </body>
</html>
